<template>
  <div>
    <a-modal
      :visible="showModal"
      :maskClosable="false"
      :keyboard="!formModal.loading"
      :closable="!formModal.loading"
      :title="'党费收缴信息'"
      :okText="'提交'"
      width="760px"
      :destroyOnClose="true"
      @cancel="cancelSub"
      centered
    >

      <a-form-model class="flex-model-form"
        ref="addForm"
        :model="formModal.form"
        :rules="formModal.rules"
      >
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="发展阶段" prop="phase">
              <Selector
                v-model="formModal.form.phase"
                selectType="28"
                urlType="union"
              ></Selector>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="时间节点" prop="node">
              <a-date-picker v-model="formModal.form.node"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
              />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="23">
            <a-form-model-item label="详细信息" prop="detail">
              <BaseTextarea v-model="formModal.form.detail"></BaseTextarea>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="记录人">
              <BaseInput v-model="userInfo.name" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="记录时间" prop="createTime">
              <BaseInput v-model="formModal.form.createTime" disabled></BaseInput>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="证明材料">
             <upload-list
                :fileAutoLoading="false"
                :businessCode="'PARTY04'"
                @fileArrysData="fileChanged"
                :uploadArrys.sync="files"
              ></upload-list>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>

      <template slot="footer">
        <a-button :disabled="formModal.loading" key="back" @click="cancelSub">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="formModal.loading" @click="submitForm">
          提交
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>

import BaseInput from '@/components/BaseInput'
import BaseTextarea from '@/components/BaseTextarea'
import Selector from '@/components/Select/Selector.vue';
import UploadList from '@/components/UploadList'
import { memberDevelopmentInsertSelective, updateByPartyMemberDevelopment, getPartyMemberDevelopmentById } from '@/api/partyMasses'
export default {
  name:'a'+ Date.now(),
    // name: 'AddDevelopment',
    components: {
      BaseTextarea,
      BaseInput,
      UploadList,
      Selector
    },
    props: {
      visible: {
        type: Boolean,
        default() {
            return true
        },
      },
      curId: {
        type: [String, null]
      },
      modalType: {
        type: String,
        default() {
          return 'add'
        }
      }
    },
    data() {
        return {
          files: [],
          formModal: {
            loading: false,
            form: {
              phase: null,
              detail: '',
              node: '',
              createTime: '',
              fileIds: []
            },
            rules: {
              phase: [ { required: true, message: '请选择发展阶段', trigger: 'change' } ],
              detail: [ { required: true, message: '请填写详细信息', trigger: 'blur' } ],
              node: [ { required: true, message: '请选择具体起始时间', trigger: 'change' }],
            },
          },
        }
    },
    watch:{
      visible: {
        handler(nv, old) {
          if (this.$refs.addForm) this.$refs.addForm.resetFields();
          if (nv) {
            if(this.modalType == 'add') {
              this.formModal.form.node = this.$dateFormat(new Date(), 'D');
              this.formModal.form.createTime = this.$dateFormat(new Date(), 'D');
            } else {
              this.getDetail();
            }
          }
        }
      },
      files: {
        handler(nv, old) {
          if (nv) {
            this.fileChanged(nv)
          }
        }
      }
    },
    computed: {
      showModal() {
        return this.visible
      },
      userInfo() {
        return this.$userInfo()
      },
    },
    mounted() {

    },
    methods: {
      getDetail() {
        getPartyMemberDevelopmentById({id: this.curId}).then((res) => {
          if (res && res.code == 0) {
              this.formModal.form.phase = res.data.phase;
              this.formModal.form.detail = res.data.detail;
              this.formModal.form.node = this.$dateFormat(new Date(res.data.node), 'D');;
              this.formModal.form.createTime = this.$dateFormat(new Date(res.data.createTime), 'D');
              this.files = res.data.fileList || [];
          }
        })
      },
      fileChanged(res) {
        const commonIds = this.files.map((item, index) => {
          return item.commonId
        })
        this.formModal.form.fileIds = commonIds;
      },
      cancelSub() {
        this.$emit('update:visible', false)
      },
      confirmSub(text,func) {
        let _this = this;
        this.$confirm({
          title: '温馨提示',
          content: text,
          onOk:() => {
            return func()
          },
          onCancel() {
          },
        });
      },
      submitForm() {
        this.$refs.addForm.validate(valid => {
          if (valid) {
            this.confirmSub('确认提交吗？', this.submitFunc);
          } else {
            this.$message.warning("请填写完所有必填项信息")
            return false;
          }
        });
      },
      submitFunc() {
        this.formModal.loading = true;
        const params = {
          partyMemberId: this.$route.query.id,
          ...this.formModal.form
        }
        if (this.modalType == 'edit') {
          params.id = this.curId;
        }
        const api = (this.modalType == 'add') ? memberDevelopmentInsertSelective : updateByPartyMemberDevelopment;
        const msg = (this.modalType == 'add') ? '新增' : '修改';
        return api(params).then((res) => {
          this.$refs.addForm.resetFields();
          this.formModal.loading = false;
          if ((res && res.data && res.data.code == 0) || (res && res.code == 0)) {
            this.$message.success(`${msg}成功`)
            this.cancelSub()
            this.$emit('submitSuccess');
          } else {
            this.$message.error(`${msg}失败！`)
          }
        }).catch(() => {
          this.formModal.loading = false
        })
      }
    },
}
</script>
<style lang="less" scoped>
  .ant-form-item{
    display: flex;
  }
  .tool-btns .ant-btn{
    margin-left: 12px;
   }
</style>
